<template>
  <view>
    <u-form class="form" :model="form" ref="form1" >
      <u-form-item label="头像" prop="cover" label-position="top">
        <view class="u-avatar-wrap">
          <image class="u-avatar" :src="form.avatar" mode="aspectFill"></image>
        </view>
        <u-button @tap="chooseAvatar">上传头像</u-button>
      </u-form-item>
      <u-form-item label="姓名" prop="name"><u-input v-model="form.name" /></u-form-item>
      <u-form-item label="生日" prop="birthday"><u-input v-model="form.birthday" />
      </u-form-item>
      <u-form-item label="性别" prop="sex">
        <u-radio-group v-model="form.sex">
          <u-radio name="1">男</u-radio>
          <u-radio name="2">女</u-radio>
        </u-radio-group>
      </u-form-item>
      <u-form-item label="简介" prop="intro"><u-input v-model="form.intro" /></u-form-item>
      <u-form-item label="类别" prop="categories">
        <u-radio-group v-model="form.categories">
          <u-radio v-for="(item, index) in categoriesList" :key="index" :name="item">
            {{ item }}
          </u-radio>
        </u-radio-group>
      </u-form-item>
      <u-form-item label-width= "180" label="人间体" prop="earthlyBody"><u-input v-model="form.earthlyBody" /></u-form-item>
      <u-form-item label-width= "180" label="登场作品" prop="debut"><u-input v-model="form.debut" /></u-form-item>
    </u-form>
    <button @click="submit">提交</button>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        aid :'',
        form: {
          avatar: '',
          name: '',
          birthday: "",
          intro: '',
          sex: '1',
          categories: '',
          earthlyBody: '',
          debut: ''
        },
        categoriesList: ['昭和系', '平成系', '令和系'],
        calendar1: {
          show: false,
        },
        rules: {
          name: [{
            required: true,
            message: '请输入姓名',
            trigger: ['change', 'blur']
          }]
        }
      }
    },
    onLoad(e) {
      console.log(e)
      if(e.aid) {
        this.aid = e.aid
        vk.callFunction({
          url: 'client/pub.aoteman.getDetail',
          title: '请求中...',
          data: {'_id': e.aid},
          success: data => {
            console.log(data)
            this.form = data
          }
        })
      }
    },
    methods: {
      chooseAvatar () {
        uni.chooseImage({
          count: 1,
          sizeType: ['compressed'],
          success: (res) => {
            vk.uploadFile({
              title: "上传中...",
              file: res.tempFiles[0],
              needSave: true,
              success:(res) => {
               // 上传成功
                console.log(res)
                this.form.avatar = res.url
              },
              fail: (err) => {
               // 上传失败
              
              }
            });
          }
        });

      },
      submit() {
        
        this.$refs.form1.validate((valid) => {
          console.log(valid)
          debugger
          let host = 'client/pub.aoteman.add'
          if(this.aid.length >0) {
            host = 'client/pub.aoteman.edit'
            this.form._id = this.aid
          }
          if (valid) {
            vk.callFunction({
              url: host,
              title: '请求中...',
              data: this.form,
              success: (data) => {
                console.log("请求成功")
              }
            });
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  .form {
    margin: 24rpx;
  }
.u-avatar-wrap {
  height: 80rpx;
  margin-top: 24rpx;
  margin-bottom: 24rpx;
  text-align: center;
}
.u-avatar {
  width: 150rpx;
  height: 150rpx;
  border-radius: 100rpx;
}
</style>